import VueRouter from 'vue-router';
const home = () => import('@/pages/home.vue')
const pag = () => import('@/pages/pag.vue')
const props = () => import('@/pages/props')
const TestEmit = () => import('@/pages/$emit')
const TestSlot = () => import('@/pages/slot')
const SlotBtns = () => import('@/pages/slot/btns.vue')
const DefaultSlot = () => import('@/pages/slot/default')
const NamedSlot = () => import('@/pages/slot/named')
const ScopeSlot = () => import('@/pages/slot/scope')
const TestMixins = () => import('@/pages/mixins')
const TestPlugins = () => import('@/pages/plugins')
const LifeCircle = () => import('@/pages/lifeCircle.vue')
const TestRef = () => import('@/pages/$refs.vue')
const TestVuex = () => import('@/pages/vuex')
const VuexBtns = () => import('@/pages/vuex/btns.vue')
const DefaultVuex = () => import('@/pages/vuex/default')
const MapState = () => import('@/pages/vuex/state/mapState.vue')
const Demo = () => import('@/pages/demo')
const WhichFunc = () => import('@/pages/whichFunc')

var router = new VueRouter({
  routes: [
    {
      path: '/',
      component: home,
    },
    {
      path: '/pag',
      component: pag,
    },
    {
      path: '/props',
      component: props,
    },
    {
      path: '/$emit',
      component: TestEmit,
    },
    {
      path: '/slot',
      component: TestSlot,
      children: [
        {
          path: '',
          component: SlotBtns
        },
        {
          path: 'default',
          component: DefaultSlot,
        },
        {
          path: 'named',
          component: NamedSlot
        },
        {
          path: 'scope',
          component: ScopeSlot
        }
      ]
    },
    {
      path: '/mixins',
      component: TestMixins
    },
    {
      path: '/plugins',
      component: TestPlugins
    },
    {
      path: '/life-circle',
      component: LifeCircle
    },
    {
      path: '/$refs',
      component: TestRef
    },
    {
      path: '/vuex',
      component: TestVuex,
      children: [
        {
          path: '',
          component: VuexBtns
        },
        {
          path: 'default',
          component: DefaultVuex
        },
        {
          path: 'state/mapstate',
          component: MapState
        }
      ]
    },
    {
      path: '/demo',
      component: Demo
    },
    {
      path: '/which-func',
      component: WhichFunc
    },
  ]
})

// 添加全局前置路由守卫
// 该方法会在路由初始化和跳转到指定路由之前被调用
// 比如当前处于http://localhost:8081/#/路径下
// 现在要往http://localhost:8081/#/home路径跳转。
// 那么在进入/home路径之前，会调用该方法
// 该方法有几个箭头回调函数。回调函数内有3个参数，to from next
// to表示要进入的目标路由对象
// from 表示当前导航正要离开的路由对象
// next是一个函数，表示是否要放行，让你跳转过去。或者让你跳转到哪个路由去。
// router.beforeEach((to, from, next) => {
//     // 这里的判断意思是 你是打算从根路径离开，跳转到/home路由里吗，你确定吗？
//     // 如果3个条件都满足，那么就用next()放行，完成跳转。
//     // 其他情况的跳转，均被拒绝。
//     if (from.path === '/' && to.path === '/home' && confirm('你确定要跳转到/home路由去吗？')) {
//         next();
//     }
// })

// 全局前置路由守卫的鉴权，即是否需要全局前置路由守卫的拦截
// 鉴权配置是以对象的形式，配置在meta属性中。
// 比如/about路由，不想被前置路由拦截，而是可以直接跳转
// 那么就可以在/about路由里添加配置 meta: {isAuth: false},
// 然后在全局前置路由守卫中使用
// router.beforeEach((to, from, next) => {
//     if (!to.meta.isAuth) {
//         if (from.path === '/' && to.path === '/home' && confirm('你确定要跳转到/home路由去吗？')) {
//             next();
//         }
//     } else {
//         next();
//     }
// })

// 全局后置路由守卫，顾名思义，就是跳转到某个路由之后发生的事情
// 该方法会在路由初始化和跳转到目标路由之后被调用
// 该方法和前置守卫几乎一致，不同的是，后置守卫没有next参数
// router.afterEach((to, from) => {
//     if (to.path === '/home') {
//         alert('跳转到home路由来了');
//     }
// })

export default router;